<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物网站</title>
	 <!-- 引入的  初识化css   fullpage css -->
	 <link rel="stylesheet" href="css/base.css" />
	 <!-- 引入自己的css  -->
	 <link rel="stylesheet" href="css/mypage.css" />
	 <link rel="stylesheet" href="css/jquery.fullPage.css" />
	 <!-- y这是一个jquery插件，所以先引入jquery -->
	 <script src="js/jquery.min.js"></script>
	  <!-- 如果想要 easing 缓动动画  那就引入 easing js -->
	 <script src="js/jquery.easing.1.3.js"></script>
	 <script src="js/jquery.fullPage.min.js"></script>
    <!-- 360度汽车旋转 -->
    <script src="js/circlr.min.js"></script>
	 <!-- 引入自己的js -->
	 <script src="js/myPage.js"></script>
</head>
<body>
 <!-- 直接进入 -->
<a href="#" class="go">
	<img src="images/t1ldiffkjfxxxzhxzd-101-101.png" alt="">
</a>
<!-- next 下一屏幕 -->
<a href="javascript:;">
  <img src="images/next.png"  class="next next_undown" alt="">
</a>
<div id="fullpage">
    <!-- 第一屏幕制作 -->
       <div class="section section1">
           <img src="images/t1wsqsfgnaxxxmjxp6-470-50.png" class="fly updown" alt="">
           <img src="images/t1xccqfflgxxxild.png" class="shirt01 shirt-updown" alt="">
           <img src="images/t1iakufbxxxxctz4tl-824-274.png" class="goods" alt="">
       </div>
      <!-- 第二屏幕制作 -->
       <div class="section section2">
           <div class="computer">
               <div class="search move">
                   <img src="images/search-words.png" class="search-wrods" alt="">
               </div>
               <img src="images/search-02-1.png"  class="search-02-1" alt="">
               <img src="images/goods-441-218.png"  class="goods-02" alt="">
               <!-- 沙发 -->
               <img src="images/shirt-02-207-166.png" class="shirt-02" alt="">
               <!-- 白色底盒子用来遮挡沙发的 -->
               <div class="cover move"></div>
           </div>
           <img src="images/words-01-361-25.png" class="words-01" alt="">
           <img src="images/words-02.png"  class="words-02" alt="">
       </div>
       
       <!-- 第三屏幕制作 -->
       
       <div class="section section3">
           <div class="main">
               <div class="select">
                   <img src="images/img-01.gif" class="img" alt="">
                   <img src="images/img-01-a.gif" class="img img-01-a" alt="">
                   <img src="images/btn-01.gif" class="btn" alt="">
                   <img src="images/btn-01-a.gif" class="btn btn-01-a" alt="">
               </div>
               沙发
               <img src="images/shirt-02-207-166.png" class="shirt-03" alt="">
               <img src="images/t1f.png" class="t1f"  alt="">
           </div>
       </div>
    
        <!-- 第四屏幕制作 -->
    
    <div class="section section4">
          <img src="images/cloud.png"  class="cloud cloud-back1">
          <img src="images/words-04.png" class="word">
          <img src="images/words-04-a.png" class="word words-04-a">
          <div class="car move"> <!-- 购物车 -->
              <img src="images/t1f.png" class="car-img" alt="">
              <img src="images/car.png" alt="">
      
          </div>
          <div class="note move">
                <img src="images/t1sqosfx8bxxa9wx_i-173-47.png"  class="note-img" alt="">  
               <img src="images/t1.png"  alt="">
          </div>
    </div>
    <!-- 第五屏幕制作 -->
    <div class="section section5">
        <img src="images/words-05.png" class="words-05">
        <img src="images/card-05.png" class="card-05">
        <img src="images/order-05.png" class="order-05">
        <img src="images/t1f.png" class="t1f-05">
        <div class="overFlow">
          <img src="images/mouse-05.png" class="mouse">
          <img src="images/mouse-05-a.png" class="mouse mouse-05-a">
          <img src="images/hand-05.png" class="hand-05">
        </div>
        
    </div>
     <!-- 第6屏幕制作 -->
    <div class="section section6">
        <img src="images/box.png" alt="" class="box-06" />
        <img src="images/car-06.png" alt="" class="car-06" />
        <img src="images/cloud-06.png" alt="" class="cloud-06" />
        <img src="images/88.png" alt="" class="pop-06" />
        <img src="images/man.png" alt="" class="boy">
        <img src="images/women.png" alt="" class="girl">
        <img src="images/door.png" alt="" class="door">
        <img src="images/t1kzyqffnexxbcrepj-139-173.png" alt="" class="pop-07">
        <img src="images/words-06-a.png" alt="" class="words-06-a">
    
    </div>
     <!-- 第7屏幕制作 -->
    <div class="section section7">
      <div class="star move">
        
      </div>
      <img src="images/good-07.png" alt="" class="good-07">
    </div>
 <!-- 第8屏幕制作 -->
    <div class="section section8">
       <div class="container">
        <div id="circlr">
              
            <div id="loader"></div>
        </div>
 <script>
       // 需要准备 74个图片
        for(var i = 1; i<=74; i++) {
          // 创建图片   别忘更换属性
          var img = $("<img  data-src='picture/"+i+".png'/>");
          // 追加到 circlr里面
           $("#circlr").append(img);// prepend 内部的前面添加  append 内部的后面添加
          
  }
 </script>
 </div>

<script type="text/javascript">
    $(function() {  // 加一个入口函数 ，意思是等上面的 74张图片加载完毕之后，才执行
      var crl = circlr('circlr', {
      scroll : true,  // 滚动滚轮也能旋转
      loader : 'loader'   
     })
    })
</script>
    </div>  
 <!-- 第9屏幕制作 -->
   <div class="section section9">
        <a href="#" class="beginShoping">
          <img src="images/btn-08.png" alt="">
          <img src="images/btn-08-a.gif" alt="" class="btn-08-a">
        </a>
        <img src="images/again.png"  class="again" alt="">
        <img src="images/hand-08.png"  class="hand-08">
    </div>   
 
</div>

</body>
</html>